<template>
	<a-button type="primary" @click="showModal">
		<template #icon><PlusCircleOutlined /></template>
		添加灰度成员
	</a-button>
	<a-table :columns="columns" :data-source="data" align="center" :pagination="false" style="margin-top: 8px">
		<template #bodyCell="{ column, record, index }">
			<template v-if="column.dataIndex === 'action'">
				<div style="display: flex; justify-content: space-evenly">
					<div @click="edit(record, index)">编辑</div>
					<div>
						<a-popconfirm title="确认删除么" ok-text="Yes" cancel-text="No" @confirm="confirm(index)" @cancel="cancel">
							<a href="#">删除</a>
						</a-popconfirm>
					</div>
				</div>
			</template>
		</template>
	</a-table>

	<a-modal v-model:visible="visible" title="灰度成员" @ok="handleOk" @cancel="cancel" :centered="true">
		<a-form ref="formRef" :model="formState.form" :rules="rules" :colon="false" :label-col="labelCol" :key="ind">
			<a-form-item label="用户" name="age">
				<!-- <a-select v-model:value="formState.name" :options="options1" style="width: 100%" placeholder="请选择">
				</a-select> -->
				<a-input v-model:value="formState.form.age" />
			</a-form-item>
			<a-form-item label="账号" name="address">
				<a-input v-model:value="formState.form.address" />
			</a-form-item>
			<a-form-item label="所属企业" name="tags">
				<a-input v-model:value="formState.form.tags" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>
 <script setup>
import { notification } from 'ant-design-vue'
const visible = ref(false)
let formState = reactive({
	form: {
		age: '',
		address: '',
		tags: ''
	}
})
const formRef = ref()
const ind = ref(0)
const curenIndex = ref('')
const rules = {
	age: [{ required: true, message: 'name', trigger: 'blur' }],
	address: [{ required: true, message: 'name', trigger: 'blur' }],
	tags: [{ required: true, message: 'name', trigger: 'blur' }]
}
const labelCol = { span: 4 }
const columns = [
	{
		title: '用户',
		dataIndex: 'age',
		key: 'age',
		align: 'center'
	},
	{
		title: '账号',
		dataIndex: 'address',
		key: 'address',
		align: 'center'
	},
	{
		title: '所属企业',
		key: 'tags',
		dataIndex: 'tags',
		align: 'center'
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		align: 'center'
	}
]
const data = ref([
	{ age: '11', address: '11', tags: '111' },
	{ age: '22', address: '222', tags: '222' },
	{ age: '333', address: '33', tags: '3333' }
])
// 新增
const showModal = () => {
	visible.value = true //弹窗展开
	ind.value++ //解决表单校验问题
	curenIndex.value = '' //判断
	formState.form = {}
}
// 取消
const cancel = () => {
	visible.value = false
}
// 提交
const handleOk = () => {
	formRef.value
		.validate()
		.then(() => {
			if (curenIndex.value === '') {
				data.value.push(formState.form)
			} else {
				data.value.splice(Number(curenIndex.value), 1, formState.form)
			}
			visible.value = false
		})
		.catch((error) => {
			notification.error({
				message: '错误',
				description: '请填写必填项',
				placement: 'topRight'
			})
		})
}
//编辑
const edit = (item, index) => {
	visible.value = true
	curenIndex.value = index
	formState.form = { ...formState.form, ...item }
}
//删除
const confirm = (index) => {
	data.value.splice(index, 1)
}
</script>